<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>

<select id="province">
  <option>请选择省:</option>

</select>

<select id="city">
  <option>请选择市:</option>
</select>

<script>
    var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    var provinceSelect = document.getElementById('province');
    var citySelect = document.getElementById('city');

    // 显示省份
    for (var pro in data){
        var proEle = document.createElement('option');
        proEle.innerText = pro;
        provinceSelect.appendChild(proEle)
    }

    provinceSelect.onchange = function () {
        // console.log('xxxxx');
        // console.log(this.selectedIndex);
        citySelect.innerHTML = '<option>请选择市:</option>';

        console.log(this.options[this.selectedIndex].innerText);
        var citys = data[this.options[this.selectedIndex].innerText];
        for (var i in citys){
            // citys[i]
            var cityEle = document.createElement('option');
            cityEle.innerText = citys[i];
            citySelect.appendChild(cityEle);
        }

    }




</script>
</body>
</html>